<template>
	<view class="cart-item">
		<view class="content">
			<view class="shop-name">
				<view class="check" :class="isCheckAll?'checked':''"  @tap="checkAll"> </view>
				<image src="/static/icon/productDetails/store.png" class="shop-img" />
				<view class="name" @tap="goShop(param.shop_id)"> {{param.shop.name}} </view>
				<Tag :radius="10" :bgc="param.shop.type==1?'#FF9B05':'#FF3B1E'" :text="param.shop.type==1?'个人':'商家'" />
			</view>
			<view class="goods-box" v-for="(item, index) in param.goods" :key="item">
				<view class="check" :class="item.checked?'checked':''"  @tap="checkOne(index)"> </view>
				<view class="goods-info" @tap="viewGoodsDetails(item.spu)">
					<image :src="item.thumb_url" class="goods-img" />
					<view class="goods">
						<view class="goods-name" :style="{width:w}"> {{item.goods_name}} </view>
						<view class="goods-desc">
							<text> 规格：{{item.spece_value_title?item.spece_value_title:'默认规格'}}  </text>
              <text class="del" @tap.stop="del(item.sku)"> 删除 </text>
						</view>
						<view class="price-num"> 
							<view class="goods-price"> ￥<text>{{item.price=='0.00'?'面议':item.price}}</text> </view>
							<view class="goods-num">
								<view class="btn" @tap.stop="editNum(-1, item.sku)"> </view>
								<view class="num"> {{item.num}} </view>
								<view class="btn" @tap.stop="editNum(1, item.sku)"> </view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue';
	import Tag from '@/components/Tag.vue';
	import { AddToCartApi, DelToCartApi } from '@/service/index.js'
	import { useCartStore } from '@/store/index.js'
	const props = defineProps(['param', 'shopIndex']) // shopIndex 商铺下表
	const { safeArea } = uni.getSystemInfoSync()
	const w = computed(() => {
		return (safeArea.width - 165) + 'px'
	})
	const isCheckAll = computed(() => {
		return props.param.goods.every(item => {
			return item.checked == true
		})
	})
  // 查看商品详情
  const viewGoodsDetails = (spu) => {
    uni.navigateTo({
      url: `/pages/productDetails/productDetails?spu=${spu}`
    })
  }
  // 查看店铺详情
  const goShop = (shop_id) => {
    console.log(shop_id);
    uni.navigateTo({
      url: `/pages/shop/shop?shop_id=${shop_id}`
    })
  }
	// 选中或取消单个商品
	const checkOne = (goodsIndex) => {
		const { CHECKONE } = useCartStore()
		CHECKONE(props.shopIndex, goodsIndex)
	}
	// 选中所有的商品
	const checkAll = () => {
		const { CHECKSHOPALL } = useCartStore()
		CHECKSHOPALL(props.shopIndex)
	}
	// 修改商品在购物车中的数量
	const editNum = (num, sku) => {
		const { GETCARTLIST } = useCartStore()
		if(props.param.goods[0].num + num == 0) {
			DelToCartApi({sku}).then(res => {
				GETCARTLIST()
			})
		} else {
			AddToCartApi({num, sku}).then(res => {
				GETCARTLIST()
			})
		}
	}
  const del = (sku) => {
    console.log(sku);
    const { DELCARTGOODS } = useCartStore()
    DELCARTGOODS(sku)
  }
</script>

<style lang="scss" scoped>
	.cart-item {
		width: 100%;
		margin-bottom: 10px;
		.content {
			width: 100%;
			border-radius: 10px;
			background-color: #fff;
			box-sizing: border-box;
			padding: 17px 10px 10px;
			.check {
				width: 20px;
				height: 20px;
				background: url('/static/icon/cart/check.png') no-repeat center center;
				background-size: 100% 100%;
				&.checked {
					background: url('/static/icon/cart/checked.png') no-repeat center center;
					background-size: 100% 100%;
				}
			}
			.shop-name {
				height: 17px;
				display: flex;
				align-items: center;
				.name {
					color: #666666;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
					margin-right: 8px;
					display: inline-block;
				}
				.shop-img {
					width: 16px;
					height: 16px;
					margin: 0 7px 0 13px;
				}
			}
			.goods-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10px;
				padding-bottom: 10px;
				&:nth-last-of-type(1) {
					padding-bottom: 0;
				}
				.goods-info {
					flex: 1;
					display: flex;
					margin-left: 12px;
					.goods-img {
						width: 80px;
						height: 80px;
						border-radius: 10px;
					}
					.goods {
						margin-left: 10px;
						flex: 1;
						.goods-name {
							color: #333333;
							font-size: 16px;
							font-weight: 500;
							line-height: 24px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						.goods-desc {
              display: flex;
              justify-content: space-between;
							height: 16px;
							color: #999999;
							font-size: 12px;
							margin-top: 3px;
							font-weight: 400;
							line-height: 16px;
              .del {
                color: #FF3B1E;
              }
						}
						.price-num {
							display: flex;
							margin-top: 15px;
							justify-content: space-between;
							.goods-price {
								color: #FF3B1E;
								font-size: 10px;
								font-weight: 600;
								line-height: 20px;
								text {
									font-size: 15px;
								}
							}
							.goods-num {
								display: flex;
								align-items: center;
								margin-bottom: 4px;
								.btn {
									width: 20px;
									height: 20px;
									background: #EEEEEE;
									border-radius: 50%;
									position: relative;
									&::before {
										display: block;
										content: '';
										width: 9px;
										height: 2px;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
										background: #999999;
									}
									&:nth-last-of-type(1) {
										&::after {
											display: block;
											content: '';
											width: 2px;
											height: 9px;
											position: absolute;
											top: 50%;
											left: 50%;
											transform: translate(-50%, -50%);
											background: #999999;
										}
									}
								}
								.num {
									color: #3D3D3D;
									margin: 0 10px;
									font-size: 14px;
									font-weight: 500;
								}
							}
						}
					}
				}
			}
		}
	}
</style>